<template>
  <div class="traffic">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form
          ref="trafficForm"
          :model="formData"
          :rules="formRules"
          label-width="90px"
        >
          <el-form-item prop="accountNo" label="坐席">
            <SearchSelectPicker
              url="/call-center/api/v1/staffInfo/page"
              placeholder="请输入坐席人员"
              lable-name="staffName"
              value-name="accountNo"
              :value.sync="formData.accountNo"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="operateType" label="操作类型">
            <el-select v-model="formData.operateType" filterable clearable placeholder="请选择操作类型">
              <el-option v-for="(item, index) of actionType" :key="index" :value="item.dictCode" :label="item.dictName" />
            </el-select>
          </el-form-item>
          <el-form-item prop="isSuccess" label="是否成功">
            <el-select v-model="formData.isSuccess" filterable clearable placeholder="请选择是否成功">
              <el-option :value="1" label="是" />
              <el-option :value="0" label="否" />
            </el-select>
          </el-form-item>
          <el-form-item prop="extensionNumber" label="分机号">
            <el-input v-model.trim="formData.extensionNumber" clearable placeholder="请输入分机号" />
          </el-form-item>
          <el-form-item prop="operateDate" label="操作时间" :span="8">
            <el-date-picker
              v-model="formData.operateDate"
              opt
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择操作起始日期"
              operator=">"
              :limite="new Date()"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="resetClick('trafficForm')">重置</Button>
            <ExportPane :data-source="selectedArry" :table-config="trfficTableConfig" :query-data-fun="queryDataFun" filename="话务操作日志">导出</ExportPane>
            <Button type="primary" enter :loading="searchLoading" @click="searchClick('trafficForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="trfficTable"
        show-selection
        no-request
        :other-filters="trfficParams"
        :table-config="trfficTableConfig"
        @selection-change="selectionChange"
      />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import ExportPane from '@/components/ExportPane'

import { ArrayFormat } from '@/utils/params-format'
import { deepCopy } from '@/utils/'
import { ccDict } from '@/api/dataDict'
export default {
  name: 'LogTraffic',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker,
    ExportPane
  },
  data() {
    return {
      searchLoading: false,
      actionType: [],
      formData: {
        accountNo: '',
        operateType: '',
        isSuccess: '',
        extensionNumber: '',
        operateDate: []
      },
      formRules: {},
      trfficParams: [],
      trfficTableConfig: {
        interfacePath: '/call-center/api/v1/callOperateLog/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        // 表格字段信息配置
        setting: [
          {
            prop: 'accountNo',
            label: '坐席'
          },
          {
            prop: 'operateType',
            label: '操作类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'call-center',
              dictTypeCode: 'CALL_OPERATION_TYPE'
            }
          },
          {
            prop: 'isSuccess',
            label: '是否成功',
            formatData: (v) => {
              if (Number(v.isSuccess) === 0) return '否'
              if (Number(v.isSuccess) === 1) return '是'
              return '--'
            }
          },
          {
            prop: 'extensionNumber',
            label: '分机号'
          },
          {
            prop: 'remark',
            label: '操作备注'
          },
          {
            prop: 'createTime',
            label: '操作时间'
          }
        ]
      },
      selectedArry: []
    }
  },
  created() {
    this.getTypeList()
  },
  mounted() {
  },
  methods: {
    // 获取类型字典
    getTypeList() {
      ccDict('CALL_OPERATION_TYPE').then(res => {
        this.actionType = res.data
      })
    },
    /**
     * 提交查询
     */
    searchClick(formName, type) {
      this.searchLoading = true
      return this.$refs[formName].validate().then(() => {
        this.searchLoading = false
        const formData = deepCopy(this.formData)
        this.trfficParams = [...ArrayFormat(formData, { operateDate: ['>=', '<='], operateType: '=', 'isSuccess': '=', extensionNumber: '=' })]
        if (type !== 'export') {
          this.$nextTick(() => {
            this.$refs.trfficTable.initTableData()
          })
        } else {
          return this.trfficParams
        }
      }).catch(() => {
        this.searchLoading = false
      })
    },
    queryDataFun(type) {
      return this.searchClick('trafficForm', type)
    },
    // 重置表单
    resetClick(formName) {
      this.$refs[formName].resetFields()
    },
    selectionChange(v) {
      this.selectedArry = v
    },
    // 查找操作类型值
    findActionType(dictCode) {
      const obj = this.actionType.find(list => {
        return list.dictCode === Number(dictCode)
      })
      return obj.dictName
    },
    // 日期加1
    addDay(datetime, days) {
      const old_time = new Date(datetime.replace(/-/g, '/'))
      const fd = new Date(old_time.valueOf() + days * 24 * 60 * 60 * 1000)
      let new_time = fd.getFullYear() + '-'
      const month = fd.getMonth() + 1
      if (month >= 10) {
        new_time += month + '-'
      } else {
        // 在小于10的月份上补0
        new_time += '0' + month + '-'
      }
      if (fd.getDate() >= 10) {
        new_time += fd.getDate()
      } else {
        // 在小于10的日期上补0
        new_time += '0' + fd.getDate()
      }
      return new_time
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
